<template>
	<!-- background:linear-gradient(to bottom,#33daff 30%,#ffffff 70%); -->
	<div>
		<Navigation></Navigation>
		<div style="margin-bottom: 70px;padding-top: 70px;">
			<div align="center">
				<div style="width: 60%;">
					<div
						style="background-color: #FFFFFF;border: 1px solid rgb(0, 0, 0,0.1);border-radius: 10px;padding-top: 10px;padding-bottom: 10px;">
						<el-row>
							<el-col :span="12" style="text-align: left;font-size: 30px;height: 40px;">
								<span style="margin-left: 20px;color: #2bad56;" v-if="order.payment===2">已出票</span>
								<span style="margin-left: 20px;color: red;" v-else-if="order.payment===1">已取消</span>
								<span style="margin-left: 20px;color: #ffa200;" v-else-if="order.payment===0">待支付</span>
								<span style="margin-left: 20px;color: #f7ea59;" v-else-if="order.payment===3">已退款</span>
							</el-col>
							<el-col :span="12" style="height: 40px;position: relative;">
								<div style="position: absolute;bottom: 0;right: 0;">
									<span style="font-size: 20px;color: #00c8ff;margin-right: 5px;">总额明细</span><span
										style="margin-right: 20px;font-size: 25px;color: #ff9900;">￥{{order.price}}</span>
								</div>
							</el-col>
						</el-row>
						<el-row style="margin-top: 5px;">
							<el-col :span="12" style="text-align: left;font-size: 15px;color: #989898;">
								<span style="margin-left: 20px;">订单号</span>
								<span style="margin-left: 5px;">{{order.order_id}}</span>
							</el-col>
							<el-col :span="12" style="text-align: right;font-size: 15px;color: #989898;">
								<span>预定时间</span><span
									style="margin-left: 5px;margin-right: 20px;">{{order.generation_time}}</span>
							</el-col>
						</el-row>
					</div>

					<div style="margin-top: 20px;">
						<el-row :gutter="20">
							<el-col :span="16">
								<div
									style="background-color: #FFFFFF;border: 1px solid rgb(0, 0, 0,0.1);border-radius: 10px;padding-bottom: 30px;">
									<div v-for="(item,index) in passenger" style="margin-top: 30px;">
										<hr v-if="index>0"
											style="border: none;border-bottom: #cecece 1px dashed;margin-left: 20px;margin-right: 20px;margin-bottom: 20px;">
										<el-row>
											<el-col :span="5" style="text-align: left;height: 50px;">
												<div
													style="width: 20px;height: 20px;background-color: #cecece;color: #ffffff;border-radius: 5px;display: inline-block;text-align: center;margin-left: 20px;">
													{{index+1}}
												</div>
												<div style="display: inline-block;line-height: 50px;">
													<span style="margin-left: 5px;color: #cecece;">姓名</span>
													<span style="margin-left: 15px;">{{item[1].passenger_name}}</span>
												</div>
											</el-col>
											<el-col :span="10" style="border-right: 1px #cecece dashed;height: 50px;">
												<div style="line-height: 50px;display: inline-block;">
													<span style="color: #cecece;">身份证号</span>
													<span style="margin-left: 15px;">{{item[1].passenger_number}}</span>
												</div>
											</el-col>
											<el-col :span="9" style="height: 50px;text-align: left;">
												<div
													style="display: inline-block;line-height: 50px;margin-right: 20px;margin-left: 20px;">
													<i class="el-icon-user" style="font-size: 30px;color: #cecece;"></i>
													<span style="margin-left: 5px;color: #cecece;">联系人</span>
													<span style="margin-left: 15px;"
														v-if="item[1].passenger_phone!=='' && item[1].passenger_phone!==null">{{item[1].passenger_phone}}</span>
													<span style="margin-left: 15px;color: #cecece;" v-else>无</span>
												</div>
											</el-col>
										</el-row>
									</div>
								</div>


								<div style="border: 1px solid rgb(0, 0, 0,0.1);padding-bottom: 10px;margin-bottom: 10px;margin-top: 20px;border-radius: 5px;"
									align="center">
									<input v-model="order.mailbox" readonly="readonly"
										style="border-top: none;outline: none;height: 40px; width: 93%;
								  border-left: none;border-right: none;font-size: 15px;padding-left: 5px;border-bottom: #cecece 1px solid;color: #6f6f6f;" placeholder="Email邮箱(接收行程信息)" />
									<div align="left"
										style="width: 93%;margin-top: 5px;font-size: 12px;color: #cecece;">
										<i class="el-icon-warning" style="margin-right: 5px;"></i>
										用于订单完成之后发送订单信息
									</div>
								</div>


								<div style="margin-top: 20px;" v-if="order.payment===0">
									<el-row>
										<el-col :span="12" style="margin-bottom: 3px;text-align: left;">
											<el-checkbox v-model="agreeNot"></el-checkbox>
											<span style="font-size: 13px;text-align: left;color: #a1a1a1;">
												我已阅读并同意
												<a href="#" style="text-decoration:none;color: #00c8ff;">购票须知</a>、
												<a href="#" style="text-decoration:none;color: #00c8ff;">机票预定须知</a>
											</span>
										</el-col>
										<el-col :span="12" style="padding-top: 3px;">
											<div style="font-size: 13px;text-align: right;color: #a1a1a1;">
												<span>订单将于<span style="color: #ffa200;">{{time[0]}}</span>分<span
														style="color: #ffa200;">{{time[1]}}</span>秒后取消</span>
											</div>
										</el-col>
									</el-row>
									<el-button type="primary" style="width: 100%;height: 50px;font-size: 20px;"
										@click="pay()">去支付</el-button>
								</div>


								<div v-if="order.payment!==0"
									style="padding-bottom: 10px;margin-bottom: 10px;margin-top: 20px;" align="center">
									<div style="text-align: left;">
										<span
											style="font-size: 20px;padding-left: 5px;border-left: #00c8ff 5px solid;color: #00c8ff;font-weight: 900;">便捷服务</span>
									</div>
									<hr style="margin-top: 10px;border: none;border-bottom: #cecece 1px solid;">
									<div style="margin-top: 10px;box-shadow: 0px 0px 10px rgba(0, 0, 0,0.1);">
										<el-row>
											<el-col :span="8">
												<a href="javascript:;" style="text-decoration:none;">
													<div class="service"
														style="height: 130px;border: 1px #e6e6e6 solid;display: table;width: 100%;border-right: none;">
														<div
															style="display: table-cell;vertical-align: middle;text-align:center;">
															<svg width="40" height="40" viewBox="0 0 48 48" fill="none">
																<path
																	d="M22 29L13.7763 33.1118C12.6994 33.6503 11.4049 33.4927 10.4886 32.7117L4 27.1808L7.56226 25.8157C8.19869 25.5718 8.8992 25.5519 9.54846 25.7592L12.8273 26.8063C13.5787 27.0463 14.3944 26.9807 15.0977 26.6237L37.36 15.3248C37.7807 15.1113 38.2459 15 38.7177 15H44L42.4472 18.1056C42.1569 18.6862 41.6862 19.1569 41.1056 19.4472L32 24"
																	stroke="#00c8ff" stroke-width="4"
																	stroke-linecap="round" stroke-linejoin="round" />
																<path d="M22.0007 29L18.0003 31L23.0003 41L32.0003 24"
																	stroke="#00c8ff" stroke-width="4"
																	stroke-linecap="round" stroke-linejoin="round" />
																<path d="M17 25L12 16L28 20" stroke="#00c8ff"
																	stroke-width="4" stroke-linecap="round"
																	stroke-linejoin="round" />
															</svg>
															<div style="color: #989898;font-size: 15px;">航班动态</div>
														</div>
													</div>
												</a>
											</el-col>
											<el-col :span="8">
												<a href="javascript:;" style="text-decoration:none;">
													<div class="service"
														style="height: 130px;border: 1px #e6e6e6 solid;display: table;width: 100%;border-right: none;">
														<div
															style="display: table-cell;vertical-align: middle;text-align:center;">
															<svg width="40" height="40" viewBox="0 0 48 48" fill="none">
																<rect x="9" y="18" width="30" height="24" rx="2"
																	fill="none" stroke="#00c8ff" stroke-width="4" />
																<circle cx="17" cy="26" r="2" fill="#00c8ff" />
																<circle cx="31" cy="26" r="2" fill="#00c8ff" />
																<path
																	d="M20 32C18.8954 32 18 32.8954 18 34C18 35.1046 18.8954 36 20 36V32ZM28 36C29.1046 36 30 35.1046 30 34C30 32.8954 29.1046 32 28 32V36ZM20 36H28V32H20V36Z"
																	fill="#00c8ff" />
																<path d="M24 10V18" stroke="#00c8ff" stroke-width="4"
																	stroke-linecap="round" stroke-linejoin="round" />
																<path d="M4 26V34" stroke="#00c8ff" stroke-width="4"
																	stroke-linecap="round" stroke-linejoin="round" />
																<path d="M44 26V34" stroke="#00c8ff" stroke-width="4"
																	stroke-linecap="round" stroke-linejoin="round" />
																<circle cx="24" cy="8" r="2" stroke="#00c8ff"
																	stroke-width="4" />
															</svg>
															<div style="color: #989898;font-size: 15px;">联系客服</div>
														</div>
													</div>
												</a>
											</el-col>
											<el-col :span="8">
												<a href="javascript:;" style="text-decoration:none;"
													v-if="order.payment===2 && order.statusOrder!==1" @click="deleteOrder()">
													<div class="service"
														style="height: 130px;border: 1px #e6e6e6 solid;display: table;width: 100%;">
														<div
															style="display: table-cell;vertical-align: middle;text-align:center;">
															<svg width="40" height="40" viewBox="0 0 48 48" fill="none">
																<path d="M39 32H13L8 12H44L39 32Z" fill="none" />
																<path d="M3 6H6.5L8 12M8 12L13 32H39L44 12H8Z"
																	stroke="#00c8ff" stroke-width="4"
																	stroke-linecap="round" stroke-linejoin="round" />
																<circle cx="13" cy="39" r="3" stroke="#00c8ff"
																	stroke-width="4" stroke-linecap="round"
																	stroke-linejoin="round" />
																<circle cx="39" cy="39" r="3" stroke="#00c8ff"
																	stroke-width="4" stroke-linecap="round"
																	stroke-linejoin="round" />
																<path d="M22 22H30" stroke="#00c8ff" stroke-width="4"
																	stroke-linecap="round" stroke-linejoin="round" />
															</svg>
															<div style="color: #989898;font-size: 15px;">退票服务</div>
														</div>
													</div>
												</a>

												<a href="/Search" style="text-decoration:none;" v-else>
													<div class="service"
														style="height: 130px;border: 1px #e6e6e6 solid;display: table;width: 100%;">
														<div
															style="display: table-cell;vertical-align: middle;text-align:center;">
															<svg width="40" height="40" viewBox="0 0 48 48" fill="none">
																<path fill-rule="evenodd" clip-rule="evenodd"
																	d="M6 15H42L40 42H8L6 15Z" fill="none"
																	stroke="#00c8ff" stroke-width="4"
																	stroke-linejoin="round" />
																<path d="M16 19V6H32V19" stroke="#00c8ff"
																	stroke-width="4" stroke-linecap="round"
																	stroke-linejoin="round" />
																<path d="M16 34H32" stroke="#00c8ff" stroke-width="4"
																	stroke-linecap="round" />
															</svg>
															<div style="color: #989898;font-size: 15px;">选购其他机票</div>
														</div>
													</div>
												</a>
											</el-col>
										</el-row>
									</div>
								</div>

							</el-col>
							<el-col :span="8" style="text-align: left;">
								<div
									style="background-color: #FFFFFF;border: 1px solid rgb(0, 0, 0,0.1);border-radius: 10px;padding-top: 20px;padding-bottom: 20px;">
									<div style="margin-left: 20px;font-size: 20px;font-weight: 900;color: #00c8ff;">航班信息
									</div>
									<hr
										style="margin-top: 10px;border: none;border-bottom: #cecece 1px solid;margin-left: 20px;margin-right: 20px;">

									<el-carousel indicator-position="outside" arrow="never" :autoplay="false"
										:loop="false" style="">
										<el-carousel-item v-for="(item,index) in flight">

											<div style="margin-left: 20px;margin-right: 20px;margin-top: 20px;">
												<div>
													<el-row>
														<el-col :span="16" style="height: 30px;">
															<div
																style="background-color: #00c8ff;display: inline-block;padding: 6px;border-radius: 10px;color: #FFFFFF;font-size: 12px;">
																单程</div>
															<span
																style="margin-left: 10px;font-weight: 900;">{{item[1].departure_date}}</span>
															<span
																style="margin-left: 10px;font-weight: 900;">{{item[1].departureCity.city_name}}<span
																	style="margin-left: 5px;margin-right: 5px;">-</span>{{item[1].destinationCity.city_name}}</span>
														</el-col>
														<el-col :span="8" style="height: 30px;position: relative;">
															<span
																style="font-size: 14px;position: absolute;right: 0;line-height: 30px;">{{item[1].timeOfFlight.hours}}时{{item[1].timeOfFlight.minutes}}分</span>
														</el-col>
													</el-row>

													<el-row style="margin-top: 10px;">
														<el-col :span="5"
															style="border-right: #cecece 5px solid;font-size: 15px;">
															<div>{{item[1].departure_time}}</div>
															<div style="margin-top: 30px;">{{item[1].arrival_time}}
															</div>
														</el-col>
														<el-col :span="10" style="font-size: 15px;padding-left: 15px;">
															<div>{{item[1].setout_information.airport_name}}</div>
															<div style="margin-top: 30px;">
																{{item[1].arrive_information.airport_name}}
															</div>
														</el-col>
														<el-col :span="9" align="right" style="">
															<div style="font-size: 13px;">{{item[1].flight_name}}</div>
															<div style="font-size: 13px;">{{item[1].model.model_name}}
															</div>
														</el-col>
													</el-row>

													<div style="margin-top: 30px;font-size: 13px;">
														<el-divider content-position="left"
															style="margin: 10px;">乘客座位</el-divider>
														<div v-for="orders in order.orderDetails"
															v-if="orders.flight.flight_name===item[1].flight_name"
															style="margin-top: 5px;">
															<el-row>
																<el-col :span="12"
																	style="text-align: left;">{{orders.passenger_name}}</el-col>
																<el-col :span="12" style="text-align: right;">
																	<span>{{orders.seat.seat_line}}{{orders.seat.seating_class}}</span>(<span
																		style="margin-right: 5px;">{{orders.seat.seat_column}}列</span><span>{{orders.seat.seat_line}}行</span>)
																	<span style="margin-left: 5px;"
																		v-if="orders.seat.cabin_class===0">经济座</span>
																	<span style="margin-left: 5px;"
																		v-else-if="orders.seat.cabin_class===1">商务座</span>
																	<span style="margin-left: 5px;"
																		v-else-if="orders.seat.cabin_class===2">头等座</span>
																</el-col>
															</el-row>
														</div>
													</div>

												</div>
											</div>
										</el-carousel-item>
									</el-carousel>
								</div>
							</el-col>
						</el-row>
					</div>

				</div>
			</div>
		</div>

		<el-dialog :visible.sync="dialogVisible" width="25%" :close-on-press-escape="false" :show-close="false"
			:close-on-click-modal="false">

			<div style="text-align: center;">
				<svg width="50" height="50" viewBox="0 0 48 48" fill="none">
					<path
						d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z"
						fill="none" stroke="#00c8ff" stroke-width="4" stroke-linejoin="round" />
					<path d="M24.0084 12.0001L24.0072 24.0089L32.4866 32.4883" stroke="#00c8ff" stroke-width="4"
						stroke-linecap="round" stroke-linejoin="round" />
				</svg>
			</div>

			<div style="margin-top: 20px;" v-if="!dialog">
				<el-row>
					<el-col :span="13" style="text-align: right;">
						<span style="font-size: 25px;">退款中</span>
					</el-col>
					<el-col :span="11" style="text-align: left;">
						<span style="font-size: 25px;">{{turn}}</span>
					</el-col>
				</el-row>
			</div>

			<div v-else>
				<div style="text-align: center;margin-top: 20px;font-size: 17px;">
					{{information}}
				</div>

				<div style="margin-top: 20px;margin-bottom: 30px;text-align: center;">
					<el-button type="primary" style="width: 30%;" @click="determine()">确定</el-button>
				</div>
			</div>


		</el-dialog>

		<BottomNavigation></BottomNavigation>
	</div>

</template>

<script>
	import Navigation from "../components/Navigation"

	import BottomNavigation from "../components/BottomNavigation"

	import axios from 'axios';

	export default {
		created() {

			if (sessionStorage.getItem("eleToken") == null) {
				this.$alert("登录失效，请重新登录", '提示', {
					confirmButtonText: '确定',
					type: 'error',
					callback: action => {
						sessionStorage.removeItem("mailbox");
						sessionStorage.removeItem("sessionId");
						location.href = "/";
					}
				});
				return;
			}

			var orderId = sessionStorage.getItem("orderId");
			if (orderId == null) {
				this.$alert("订单信息错误，请前往我的订单查看详情", '提示', {
					confirmButtonText: '确定',
					type: 'error',
					callback: action => {
						sessionStorage.setItem("switch", 1);
						location.href = "/myinfo";
					}
				});
				return;
			}

			var formData = new FormData();
			formData.append('orderId', orderId);

			axios.post("api/OrderAction/orderingInformation", formData)
				.then((res) => {
					if (res.data.code === 200) {
						this.order = res.data.data;
						this.order.generation_time = this.order.generation_time.replace("T", " ");

						this.reckonByTime(this.order.generation_time);

						var order = this.order.orderDetails;

						var passengerMap = new Map();
						var flightMap = new Map();

						for (var i = 0; i < order.length; i++) {
							passengerMap.set(order[i].passenger_name, {
								"passenger_name": order[i].passenger_name,
								"passenger_number": order[i].passenger_number,
								"passenger_phone": order[i].passenger_phone
							})
							order[i].flight.arrival_time = this.timeRestructuring(order[i].flight.arrival_time);
							order[i].flight.departure_time = this.timeRestructuring(order[i].flight.departure_time);
							order[i].flight.departure_date = this.dateRestructuring(order[i].departure_date);
							flightMap.set(order[i].flight.flight_id, order[i].flight);
						}

						var passengers = new Set(passengerMap);
						var flight = new Set(flightMap);
						this.passenger = [...passengers];
						this.flight = [...flight];
						this.hasItExceededTheTimeLimit();
					} else {
						if (res.data.code === 401 || res.data.code === 403) {
							this.$alert(res.data.msg, '提示', {
								confirmButtonText: '确定',
								type: 'error',
								callback: action => {
									sessionStorage.removeItem("eleToken");
									sessionStorage.removeItem("mailbox");
									sessionStorage.removeItem("sessionId");
									location.href = "/";
								}
							});
						} else {
							this.$message({
								dangerouslyUseHTMLString: true,
								message: '<strong>' + res.data.msg + '</strong>',
								type: 'error'
							});
						}
					}
				})
		},
		data() {
			return {
				order: [],
				passenger: [],
				flight: [],
				time: [],
				reckonByTimes: null,
				agreeNot: false,
				dialogVisible: false,
				dialog: false,
				turn: "",
				information:''
			}
		},
		components: {
			Navigation,
			BottomNavigation
		},
		methods: {
			determine(){
				if(this.information==="退款成功，资金将会在7个工作日内返回您的账户"){
					location.reload();
				}
				this.dialogVisible=false;
			},
			deleteOrder() {
				this.$confirm('是否需要退款?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.dialogVisible = true;
					this.returnTicket();
				}).catch(() => {
					this.dialogVisible = false;
				});
			},
			returnTicket() {

				this.dialog = false;

				let vm = this

				var turn = "";
				var turne = setInterval(function() {
					if(this.dialogVisible){
						clearInterval(turne);
					}
					if (turn.length >= 8) {
						turn = "."
					} else {
						turn = turn + " " + "."
					}
					vm.$set(vm.$data, 'turn', turn)
				}, 500);


				var formData = new FormData();
				formData.append('orderId', this.order.order_id);

				axios.post("api/OrderAction/returnTicket", formData)
					.then((res) => {
						this.dialog = true;
						if (res.data.code === 200) {
							this.information="退款成功，资金将会在7个工作日内返回您的账户"
						} else {
							if (res.data.code === 401 || res.data.code === 403) {
								this.$alert(res.data.msg, '提示', {
									confirmButtonText: '确定',
									type: 'error',
									callback: action => {
										sessionStorage.removeItem("eleToken");
										sessionStorage.removeItem("mailbox");
										sessionStorage.removeItem("sessionId");
										location.href = "/";
									}
								});
							} else {
								this.information=res.data.msg+"，请稍后重试"
							}
						}
					})
			},
			pay() {

				if (!this.agreeNot) {
					this.$message({
						message: '请勾选并阅读购票须知和机票预定须知',
						type: 'warning'
					});
					return;
				}

				var formData = new FormData();
				formData.append('orderId', this.order.order_id);

				axios.post("api/OrderAction/pay", formData)
					.then((res) => {
						if (res.data.code === 200) {
							const div = document.createElement('divform');
							div.innerHTML = res.data.data; // data就是接口返回的form 表单字符串
							document.body.appendChild(div);
							let len = document.forms.length - 1;
							document.forms[len].submit();
						} else {
							if (res.data.code === 401 || res.data.code === 403) {
								this.$alert(res.data.msg, '提示', {
									confirmButtonText: '确定',
									type: 'error',
									callback: action => {
										sessionStorage.removeItem("eleToken");
										sessionStorage.removeItem("mailbox");
										sessionStorage.removeItem("sessionId");
										location.href = "/";
									}
								});
							} else {
								this.$message({
									dangerouslyUseHTMLString: true,
									message: '<strong>' + res.data.msg + '</strong>',
									type: 'error'
								});
							}
						}
					})
			},
			timeRestructuring(time) {
				var timeArr = time.split(":");
				return timeArr[0] + ":" + timeArr[1];
			},
			dateRestructuring(date) {
				var dateArr = date.split("-");
				return dateArr[1] + "-" + dateArr[2];
			},
			reckonByTime(time) {
				let appointmentTime = new Date(time);
				let min = appointmentTime.getMinutes();
				appointmentTime.setMinutes(min + 30);
				appointmentTime = new Date(appointmentTime);

				let date = new Date();

				this.reckonByTimes = setInterval(() => {
					if (this.countDownFun(appointmentTime) == "倒计时结束") {
						clearInterval(this.reckonByTimes);
						if (this.order.payment === 0) {
							var al = this.$alert(
								'<i class="el-icon-loading" style="font-size:50px;"></i><br><br><strong style="font-size:20px;">订单状态异常，正在修改信息</strong>',
								'', {
									showConfirmButton: false,
									showClose: false,
									center: true,
									dangerouslyUseHTMLString: true
								});

							var formData = new FormData();
							formData.append('orderId', this.order.order_id);
							axios.post("api/OrderAction/orderStatus", formData)
								.then((res) => {
									if (res.data.code === 200) {

										location.reload();

									} else {
										if (res.data.code === 401 || res.data.code === 403) {
											this.$alert(res.data.msg, '提示', {
												confirmButtonText: '确定',
												type: 'error',
												callback: action => {
													sessionStorage.removeItem("eleToken");
													sessionStorage.removeItem("mailbox");
													sessionStorage.removeItem("sessionId");
													location.href = "/";
												}
											});
										} else {
											sessionStorage.setItem("switch", 1);
											location.href = "/myinfo";
										}
									}
								})
						}
					}
				}, 1000);

			},
			countDownFun(time) {
				// console.log(time)
				let startTime = new Date(); //当前时间
				let end = new Date(time); //结束时间
				// console.log(end)
				let result = parseInt((end - startTime) / 1000); //计算出豪秒
				let d = parseInt(result / (24 * 60 * 60)); //用总共的秒数除以1天的秒数
				let h = parseInt((result / (60 * 60)) % 24); //精确小时，用去余
				let m = parseInt((result / 60) % 60); //剩余分钟就是用1小时等于60分钟进行趣余
				let s = parseInt(result % 60);
				//当倒计时结束时，改变内容
				if (result <= 0) {
					this.time = [0, 0];
					return "倒计时结束"
				}
				if (h < 10) {
					h = "0" + h;
				}
				if (s < 10) {
					s = "0" + s;
				}
				if (h == 0 && m == 0) {
					this.time = [0, s]
				} else if (h == 0) {
					this.time = [m, s]
				}
			}
		}
	}
</script>

<style>
	.el-divider--horizontal {
		margin-top: 20px;
		margin-bottom: 15px;
	}

	.service:hover {
		box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
		transition: 0.5s;
	}
</style>